import React, { useEffect } from 'react';
import "./index.less"

// disabledUrlStatus 禁止跳转的状态
function ListItem ({ item, history, detailUrl, disabledUrlStatus, listFields }) {

    const getStatusTxt = (status, statusList) => {
        return statusList.find(el => el.value == status)?.label
    }

    const getcolor = (status) => {
        if (status == 'WAIT_FINISH' || status == 'CANCEL_TO_BE_CONFIRMED') {
            return "WAIT_FINISH"
        } else if (status == 'PROCESSING' || status == 'REPAIRING') {
            return "PROCESSING"
        } else if (status == 'REPAIRED_TO_BE_CONFIRMED') {
            return 'REPAIRED_TO_BE_CONFIRMED'
        }
    }

    const linkDetail = () => {
        if (!detailUrl) return
        if (disabledUrlStatus && disabledUrlStatus.split(',').includes(item['status'])) return
        history.push(detailUrl, { no: item.no, name: item.name })
    }

    const getStatusMTxt = (arr)=>{
        let o = arr.find( el => el.value == item['status'])
        return <span>{o.label}</span>
    }
    return (
        <div className="box" onClick={linkDetail}>
            <div className="boxTit">
                <span className="boxTitSize">{listFields.title.label}:{item[listFields.title.value]}</span>
                {
                    listFields.title.methods?.length ?
                        <div className="t-right">
               
                            {
                                getStatusMTxt(listFields.title.methods)
                                // listFields.title.methods.map((em, index) => <span key={index}>{em.label}</span>)
                            }
                        </div> : null
                }
            </div>
            <div className="boxContent">
                {
                    listFields.children.length ? listFields.children.map((el, index) =>
                        <div className="bcLine borderB" key={index}>
                            <span className="bcLineSize">{el.label}:</span>
                            {
                                el.isStatus ?
                                    <span className={`bcLineSize ${getcolor(item[el.value])}`}>{getStatusTxt(item[el.value], el.statusList)}</span> :
                                    <span className="bcLineSize">{item[el.value]}</span>
                            }

                        </div>
                    ) : null
                }
            </div>
        </div>
    );
}

export default ListItem;
